<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            
            /* 
            线性渐变
            background-image:linear-gradient()
            1.简单的线性渐变 linear-gradient(start-color,...,end-color)
            2.改变线性渐变方向
                - 关键字 top bottom left right
                - 用度数来指定方向 正的角度表示顺时针 0度是从下往上
                                  负的表示逆时针
            3.设置颜色起始位置:未设置0% 默认开始的颜色为第一个颜色，结束没设置默认到100%
            4.自定义转换中心：默认情况下2个颜色的中心点为过渡中心点（转换中心）
                     在2个颜色中间加百分比或者固定值
            5.设置多位置色标
            */
            /* background-image: linear-gradient(gold,green,red); */
            /* background-image: linear-gradient(to top,gold,green,red); */
            /* background-image: linear-gradient(to left,gold,green,red); */
            /* background-image: linear-gradient(to right,gold,green,red); */
            /* background-image: linear-gradient(45deg,gold,red); */
            /* background-image: linear-gradient(to right, gold 100px,red 50%,blue 60%,green 100%); */
            /* background-image: linear-gradient(to right, gold, 45%,red,55%, blue); */
            background-image: linear-gradient(to right, gold 10% 40%, red 55%, blue);

        }

    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>